<template>
  <el-dialog title="审批历史" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%" top="50px" custom-class="historyDialog">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="流程审批进度历史" name="first">
        <div class="text item">
          <el-table :data="circulationHistoryList" border style="width: 100%" stripe max-height="600">
            <el-table-column prop="id" label="#" align="center" type="index" width="70" />
            <el-table-column prop="processOper" label="流转节点" align="center" />
            <el-table-column prop="processBy" label="处理人" align="center" />
            <el-table-column prop="createTime" label="送达时间" align="center" />
            <el-table-column prop="updateTime" label="完成时间" align="center" />
            <el-table-column prop="processTime" label="耗时(工作日)" align="center" />
            <el-table-column prop="auditStatusName" label="状态" align="center" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实时流程图" name="second">
        <div v-if="source === 'apply'" class="xjs">
          <img src="@/assets/xjs/xjs.png" width="100%" alt="">
          <span :class="'status' + historyStatus" />
        </div>
        <div v-if="source === 'stageReview'" class="jdps">
          <img src="@/assets/xjs/jdps.png" width="100%" alt="">
          <span :class="'status' + historyStatus" />
        </div>
        <div v-if="source === 'ns'" class="ns">
          <img src="@/assets/xjs/ns.png" width="100%" alt="">
          <span :class="'status' + historyStatus" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>

import { newWorkOrderList } from '@/api/xjs/work-order'
import { doQueryProgress } from '@/api/newBaqsj/newBaqsj'
import { auditStatusList } from '../common'
import { mapGetters } from 'vuex'

export default {
  props: {
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      isLoadingStatus: true,
      currentNode: {
        hideTpls: null,
        writeTpls: null
      },
      nodeStepList: [],
      circulationHistoryList: [],
      activeIndex: 0,
      processStructureValue: {
        workOrder: { title: '' }
      },
      processId: null,
      workOrderId: null,
      historyStatus: null
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    open(row) { // category: 1：新技术 2：年审
      this.dialogVisible = true
      this.historyStatus = row.status
      this.getProcessNodeList(row.id)
    },
    getProcessNodeList(correlationId) {
      doQueryProgress({
        id: correlationId
      }).then(response => {
        const data = response.records[0]
        data.processInList.forEach(item => {
          const auditStatus = auditStatusList.find(item => {
            return item.value === item.auditStatus
          })
          if (auditStatus) {
            item.auditStatusName = auditStatus.label
          }
        })
        this.circulationHistoryList = data.processInfoList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.xjs {
    width: 70%;
    margin: 50px auto;
    position: relative;
    span {
        display: inline-block;
        position: absolute;
        &.status10 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 12%;
        }
        &.status20 {
            width: 187px;
            height: 110px;
            border: 4px solid red;
            left: 33.5%;
        }
        &.status30 {
            width: 187px;
            height: 110px;
            border: 4px solid red;
            left: 53.5%;
        }
        &.status40 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 77%;
        }
        &.status50 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 55.3%;
            top: 64.2%;
        }
        &.status60 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 33.7%;
            top: 64.2%;
        }
        &.status70 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 11.9%;
            top: 64.2%;
        }
    }
}
.jdps {
    width: 50%;
    margin: 150px auto;
    position: relative;
    span {
        display: inline-block;
        position: absolute;
        &.status110 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 21%;
            top: 0.2%;
        }
        &.status120 {
            width: 183px;
            height: 110px;
            border: 4px solid red;
            left: 56.5%;
            top: 0.2%;
        }
    }
}
.ns {
    width: 70%;
    margin: 150px auto;
    position: relative;
    span {
        display: inline-block;
        position: absolute;
        &.status80 {
            width: 72px;
            height: 73px;
            border: 4px solid red;
            left: 0%;
            top: 17.2%;
            border-radius: 50%;
        }
        &.status90 {
            width: 190px;
            height: 115px;
            border: 4px solid red;
            left: 15.7%;
            top: 0.2%;
        }
        &.status100 {
            width: 190px;
            height: 115px;
            border: 4px solid red;
            left: 41.7%;
            top: 0.2%;
        }
        &.status110 {
            width: 190px;
            height: 115px;
            border: 4px solid red;
            left: 67.7%;
            top: 0.2%;
        }
    }
}
</style>
